<template>
  <div id="box" style="display:flex">
    <el-tooltip :content="$t('button.Reset')">
      <el-button style="width: 30px;" class="iconfont el-icon-aim" type="text" color="black" @click.native="handleReset" />
    </el-tooltip>
    <el-tooltip :content="$t('button.legend')">
      <el-popover placement="bottom" trigger="click">
        <img src="@/assets/images/SCADAtip.png" style="width:200px;" alt="">
        <el-button slot="reference" style="width: 30px;" type="text" class="el-icon-info" />
      </el-popover>
    </el-tooltip>
    <el-tooltip :content="$t('button.legend')">
      <el-popover placement="bottom" trigger="click">
        <!-- <img src="@/assets/images/PPKTpi.png" style="width:400px" alt=""> -->
        <div style="font-size:16px">
          <span style="display:inline-block;width:110px;text-align:center">System Status: </span><span st> 11111111</span><br>
          <span style="display:inline-block;width:110px;text-align:center">MCS Status: </span><span st> {{ controlModel.PLCStatus }}</span><br>
          <span style="display:inline-block;width:110px;text-align:center">PLC Status: </span><span st> {{ controlModel.MCSSTatus }}</span><br>
          <span style="display:inline-block;width:110px;text-align:center">User: </span><span st> 11111111</span><br>
          <span style="display:inline-block;width:110px;text-align:center">Ver: </span><span st> {{ controlModel.Ver }}</span><br>
        </div>
        <el-button slot="reference" style="width: 30px;" type="text" class="el-icon-document" />
      </el-popover>
    </el-tooltip>
    <el-tooltip :content="isfull ? `${$t('button.ExitFullScreen')}` : `${$t('button.fullScreen')}`">
      <el-button style="width: 30px;margin:0" type="text" :class="isfull ? 'iconfont el-icon-tuichuquanping' : 'iconfont el-icon-quanping'" color="black" @click.native="handleChange" />
    </el-tooltip>
    <el-tooltip :content="$t('button.playback')">
      <el-button style="margin-right:10px" type="text" @click="playBackClick"><i style="font-size:16px" class="el-icon-video-camera" /></el-button>
    </el-tooltip>
    <el-button type="success" @click="AUTOClick">AUTO</el-button>
    <el-button type="danger" @click="PAUSEClick">PAUSE</el-button>
    <el-button type="primary" @click="RESETClick">RESET</el-button>
    <el-button type="warning" @click="BUZZOFFClick()">BUZZOFF</el-button>
    <el-button type="warning" @click="ManualTransportClickfn()">手动搬送</el-button>
    <el-button type="primary" @click="QueryRouteClickfn()">路径配置</el-button>
    <el-button type="info" @click="portManageClickfn()">PORT Manage</el-button>
  </div>
</template>

<script>
import Snap from 'snapsvg-cjs'
import { zpd } from 'snap.svg.zpd'
import { Message } from 'element-ui'
import {
  PauseApi,
  AutoApi,
  ResetApi,
  BuzzOnApi,
  BuzzOffApi
} from '@/api/dashboard'
import { OpenPlaybackApi } from '@/api/playBack'
import permission from '@/permission/index.js' // 权限判断指令
export default {
  name: 'MapContainer',
  directives: { permission },
  props: {
    // isfull: {
    //   type: Boolean,
    //   default: false
    // }
    controlModel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isfull1: 50,
      isfull: false,
      temp: 1,
      widthLength: '420px'
    }
  },
  mounted() {
    // console.log(document)
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    document.addEventListener('fullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('msfullscreenchange', () => {
      this.isfull = !this.isfull
    })
  },
  methods: {
    handleReset() {
      const svg = Snap('#svg')
      svg.zpd(function(_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function(_err, paper3) {
          svg.panTo(0, 0)
        })
      })
    },
    handleFullscreen() {
      const main = document.getElementById('snap-svg')
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        console.log(main.requestFullscreen)
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
      }
    },
    handleChange() {
      this.handleFullscreen()
    },
    reduce() {
      this.isfull1 -= 1
    },
    // 回放按钮
    async playBackClick() {
      // this.$router.push("/playBack");
      const res = await OpenPlaybackApi()
      if (res.data.details === 'ok') {
        const { href } = this.$router.resolve({
          path: '/playBack'
        })
        // 新窗口跳转
        window.open(href, '_blank')
      }
    },
    AUTOClick() {
      this.$confirm('确认执行该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await AutoApi()
        Message.success('操作成功')
      })
    },
    async PAUSEClick() {
      this.$confirm('确认执行该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await PauseApi()
        Message.success('操作成功')
      })
    },
    async RESETClick() {
      this.$confirm('确认执行该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await ResetApi()
        Message.success('操作成功')
      })
    },
    // 蜂鸣器
    BUZZOFFClick(data) {
      this.$confirm('确认执行该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (data) {
          await BuzzOnApi()
        } else {
          await BuzzOffApi()
        }
        Message.success('操作成功')
      })
    },
    // 手动搬送
    ManualTransportClickfn() {
      this.$emit('ManualTransportClickfn')
    },
    // 路径配置
    QueryRouteClickfn() {
      this.$emit('QueryRouteClickfn')
    },
    //
    portManageClickfn() {
      this.$emit('portManageClickfn')
    }
  }
}
</script>

<style scoped>
#box {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  /* width: 420px; */
  position: fixed;
  left: 30%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>
